<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .active1{
            width: 100px;
            height: 100px;
            background: yellow;
        }
        .active2{
            width: 100px;
            height: 100px;
            background: yellow;
        }
        .active3{
            width: 100px;
            height: 100px;
            background: yellow;
        }
        .box{
            width: 100px;
            height: 100px;
            border: 1px solid ;
        }
    </style>
</head>
<body>
    <div class="box" >

    </div>
    <button>点击我切换颜色</button>
    <script>
        var  btn  = document.querySelector("button"); // 获取按钮
        var boxEle = document.querySelector(".box");

        // 点击按钮的时候 3种状态之间切换
        var num = 0;
        btn.onclick = function(){
            num++;
            switch(num){
                case 1:
                    // console.log(111)
                    // boxEle.style.backgroundColor = "blue";
                    boxEle.className = "box active1"
                    break;
                case 2:
                    console.log(22)
                    // boxEle.style.backgroundColor = "yellow";
                    boxEle.className = "box active2"

                    break;
                case 3:
                    console.log(333);
                    // boxEle.style.backgroundColor = "green";
                    boxEle.className = "box active3"

                    break;
                default :
                    console.log("其他情况");
                    break
            }
            if(num==3){
                num = 0;
            }
        }
    </script>
</body>
</html>